<template>
  <div class="modal" @click.self="closeModal">
    <div class="modal-content" @click.stop>
      <img :src="imageUrl" alt="Enlarged Image" />
      <button @click="closeModal">Close</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['imageUrl'],
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 40%;
  left: 40%;
  width: 20%;
  height:20%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}
</style>